<template>
    <div class="app-container">
      <el-table ref="menuTableRef" v-loading="loading" :data="infoList" height="650" width="100%"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="programName" label="节目名称"></el-table-column>
            <el-table-column prop="programContent" label="节目描述"></el-table-column>
            <el-table-column prop="programStatus" label="节目状态">
              <template #default="scope">
                <el-tag class="ml-2" type="danger" v-if="scope.row.programStatus == '离线'">离线</el-tag>
                <el-tag class="ml-2" type="success" v-if="scope.row.programStatus == '正常'">正常</el-tag>
                <el-tag class="ml-2" type="warning" v-if="scope.row.programStatus == '停用'">停用</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="更新时间" prop="updateTime"> </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-tooltip content="预览" placement="top">
                  <el-button v-hasPermi="['iot:program:query']" size="mini" type="text" icon="el-icon-view"
                    @click="viewApp(scope.row)">预览</el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
  
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
  
          <Preview :componentData="componentData" :canvasStyleData="canvasStyleData" @close="handlePreviewChange"
            v-if="centerDialogVisible"></Preview>
    </div>
  </template>
  
  <script>
  import { programList, programDel, programIssued, list } from '@/api/information/index';
  import { listinfoClass, addinfoClass, UpdateinfoClass, delInfoClass } from "../../../api/information/infoClass.js"
  import Preview from '../../../components/visual-drag/components/Editor/Preview.vue'
  export default {
    name: '',
    props: {},
    data() {
      return {
        filterText: '',
        title: "新增分类",
        ruleForm: {
          name: ''
        },
        ruleFormQuery: {
          name: '',
          pageNum: 1,
          pageSize: 10
        },
        rules: {
          name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' }
          ]
        },
        drawer: false,
        regionList: [],
        defaultProps: {
          children: "children",
          label: "name"
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          programClass: '1829805119231696898',
          programName: '',
          programStatus: ''
        },
        dialogFormVisible: false,
        form: {
          type: '1',
          deviceList: []
        },
        programObject: {},
        formLabelWidth: '120px',
        loading: false,
        infoList: [],
        showSearch: false,
        centerDialogVisible: false,
        componentData: [],
        canvasStyleData: {},
        queryParamsDevice: {
          pageNum: 1,
          pageSize: 999
        },
        deviceList: [],
        total: 0
      };
    },
    components: { Preview },
    computed: {},
    watch: {
      // 根据名称筛选部门树
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() { },
    mounted() {
      this.getList();
      this.getListInfoClass()
    },
    methods: {
      setEditRegion(data) {
        this.ruleForm = data
        this.drawer = true
        this.title = "修改分类"
      },
      subUpdate() {
        UpdateinfoClass(this.ruleForm).then((res) => {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.drawer = false
          this.getList()
          this.resetForm()
        });
      },
      handleDeleteInfoClass(val) {
        delInfoClass(val.id).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getListInfoClass()
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.title == "修改分类") {
              this.subUpdate()
            } else {
              this.addinfo()
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      addinfo() {
        addinfoClass(this.ruleForm).then((res) => {
          this.$message({
            message: '新增成功',
            type: 'success'
          });
          this.drawer = false
          this.getList()
          this.resetForm()
        });
      },
      resetForm(formName) {
        this.ruleForm = {
          name: ''
        }
      },
      add() {
        this.drawer = true
        this.title = "新增分类"
      },
      handleNodeClick() { },
      handleQuery() {
        this.getList();
      },
      getListInfoClass() {
        listinfoClass(this.ruleFormQuery).then((res) => {
          this.regionList = res.rows
        });
      },
      // 筛选节点
      filterNode(value, data) {
        console.log(value, data)
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      resetQuery() {
        this.$refs.queryFormRef.resetFields();
        this.handleQuery();
      },
      handleUpdate(row) {
        localStorage.setItem('canvasData', row.programData)
        localStorage.setItem('canvasStyle', row.programStyles)
        this.$router.push({ path: '/Information/editor', query: { id: row.id } })
      },
      /**
       * 获取设备列表
       */
      getDevice() {
        list(this.queryParamsDevice).then((res) => {
          this.deviceList = res.rows
          this.dialogFormVisible = true
        });
      },
      issued(row) {
        this.programObject = row
        this.getDevice();
      },
      setIssued() {
        // console.log(this.form.deviceList)
        // return;
        programIssued({
          id: this.programObject.id,
          macList: this.form.deviceList,
          type: this.form.type
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '下发成功!'
            });
          }
          this.form = {
            type: '1',
            deviceList: []
          }
          this.dialogFormVisible = false
        });
      },
      handleDelete(row) {
        this.$confirm(`是否确认删除名称为"${row.programName}"的数据项?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          programDel(row.id).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      getList() {
        programList(this.queryParams).then((res) => {
          this.infoList = res.rows;
          this.total = res.total
        });
      },
      handleAdd() {
        this.$router.push({ path: '/Information/editor' })
      },
      handlePreviewChange() {
        localStorage.removeItem('canvasData')
        localStorage.removeItem('canvasStyle')
        this.$store.commit('setCurComponent', { component: null, index: null })
        this.$store.commit('setComponentData', [])
        this.$store.commit('recordSnapshot')
        this.centerDialogVisible = false
      },
      viewApp(row) {
        this.$store.commit('setComponentData', JSON.parse(row.programData))
        this.$store.commit('setCanvasStyle', JSON.parse(row.programStyles))
        this.centerDialogVisible = true;
      }
    }
  };
  </script>
  
  <style scoped>
  .demo-form-inline {
    padding: 20px;
  }
  
  .btn {
    width: 100%;
    text-align: right;
  }
  
  .box-card {
    height: 100vh;
    border-right: 1px solid #eee;
    padding: 10px;
  }
  
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding-right: 8px;
  }
  
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  </style>
  